{extend name="common/common" /}

{block name="content"}
<el-card class="box-card">
	<div slot="header">
		<span class="span-primary"><i class="fa fa-list"></i></span>
		网店报列表
	</div>
	<div class="el-card-content">
		<el-form :inline="true" class="search-table-form">
			<el-form-item>
				<el-select v-model="seaForm.depart_id" placeholder="请选择地区">
					{volist name="departs" id="v"}
					<el-option label="{$v.name}" value="{$v.id}"></el-option>
					{/volist}
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-date-picker v-model="seaForm.s_time" type="month"
					value-format="timestamp" placeholder="开始月份">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-date-picker v-model="seaForm.e_time" type="month"
					value-format="timestamp" placeholder="结束月份">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-input placeholder="请输入填报人" clearable="true" v-model="seaForm.link_man">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="info" plain @click="getTable">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="table.tableData" stripe="true" border>
			<el-table-column align="center" prop="id" sortable width="80"
				label="序号">
			</el-table-column>
			<el-table-column align="center" prop="depart_name" label="所属地区"></el-table-column>
			<el-table-column align="center" prop="company_name" label="企业名称"></el-table-column>
			<el-table-column align="center" prop="rpt_date" sortable
				label="报表日期">
			</el-table-column>
			<el-table-column align="center" prop="link_man" label="填报人"></el-table-column>
			<el-table-column align="center" prop="link_type" label="联系电话"></el-table-column>
			<el-table-column align="center" prop="is_commit_name" label="是否提交">
				<template slot-scope="scope">
					<el-tag
						:type="scope.row.is_commit == '1' ? 'primary' : 'info'">
						{{scope.row.is_commit_name}}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="operate" label="操作" width="200">
				<template slot-scope="scope">
					{if authCheck('tablequery/webshopsee')}
					<el-tooltip content="查看" open-delay="500" hide-after="1500" placement="bottom">
					<el-button
						@click="editRow(scope.row)" circle
						size="mini" plain type="success"
						icon="fa fa-eye">
					</el-button>
					</el-tooltip>
					{/if}
					{if authCheck('tablequery/webshopdel')}
					<el-tooltip content="删除" open-delay="500" hide-after="1500" placement="bottom">
					<el-button
						@click="delRow(scope.row)" circle
						size="mini" plain 	type="danger"
						icon="el-icon-delete">
					</el-button>
					</el-tooltip>
					{/if}
					{if authCheck('tablequery/webshopcommit')}
					<el-tooltip content="提交" open-delay="500" hide-after="1500" placement="bottom">
					<el-button
						@click="commitRow(scope.row)" circle
						size="mini" plain type="primary"
						icon="el-icon-upload2">
					</el-button>
					</el-tooltip>
					{/if}
				</template>
			</el-table-column>
		</el-table>
		<div class="table-page">
			<el-pagination
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:current-page="table.pageNumber"
				:page-sizes="[10, 20, 50, 75]"
				:page-size="table.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="table.tableTotal">
			</el-pagination>
		</div>
	</div>
</el-card>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		loading:false,
		seaForm:{
			depart_id:"",s_time:"",e_time:"",link_man:"",
		},
		table:{
			tableData:"",
			tableTotal:0,
			pageSize:10,
			pageNumber:1,
		},
	},
	mounted:function() {
		this.getTable();
	},
	methods:{
		getTable(){
			this.loading=true;
			var param = {
				pageSize:this.table.pageSize,
				pageNumber:this.table.pageNumber,
				depart_id:this.seaForm.depart_id,
				s_time:this.seaForm.s_time,
				e_time:this.seaForm.e_time,
				link_man:this.seaForm.link_man
			};
			$.post('{:url("Tablequery/webShop")}',param,function(res) {
				main.loading=false;
				if(res.code == 1){
					main.$message({message:res.msg,type:'success'});
					main.table.tableData = res.data.rows;
					main.table.tableTotal = res.data.total;
				}else{
					main.$notify.error({title:'失败',message:res.msg});
				}
			});
		},
		pageSizeChange(val) {
			this.table.pageSize = val;
			this.getTable();
		},
		curPageChange(val) {
			this.table.pageNumber = val;
			this.getTable();
		},
		editRow(row){
			window.location.href = "{:url('Tablequery/WebshopEdit')}?table_id="+row.id;
		},
		delRow(row){
			this.$confirm('此操作将永久删除该报表, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				$.post("{:url('Tablequery/WebshopDel')}",{
					id:row.id
				},function(res){
					if(res.code == '1'){
						main.$notify({title:"成功",type:"success",message:res.msg});
						main.getTable();
					}else{
						main.$notify.error({title:"错误",message:res.msg})
					}
				})
			}).catch(() => {
				this.$notify.info({title: '消息',message: '已取消删除'});
			});
		},
		commitRow(row) {
			this.$confirm('此操作将提交该报表, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				$.post("{:url('Tablequery/webshopCommit')}",{
					id:row.id
				},function(res){
					if(res.code == '1'){
						main.$notify({title:"成功",type:"success",message:res.msg});
						main.getTable();
					}else{
						main.$notify.error({title:"错误",message:res.msg})
					}
				})
			}).catch(() => {
				this.$notify.info({title: '消息',message: '已取消提交'});
			});
		},
	}
})
</script>
{/block}
